<template>
<section id="home" v-wechat-title="title">
   <v-header :cates="cates" insearch="1"></v-header>
   <div class="banner-box">
   <el-carousel indicator-position="outside" :height="'488px'">
    <el-carousel-item v-for="(item, index) in [{img: 'http://static.tribe.21trip.cn/banner1.png'}, {img: 'http://static.tribe.21trip.cn/banner2.png'}]" :key="index">
       <div class="banner-img" :style="{backgroundImage: 'url(' + item.img + ')'}" @click.stop="skip(item)"></div>
    </el-carousel-item>
   </el-carousel>
   </div>
   <!--视频-->
   <div class="dis30"></div>
   <!--视频导航-->
   <div class="aps">
    <div class="cates-nav" v-if="cates">
        <a href="javascript:void(0)" class="font-org fb">推荐&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
        <a href="javascript:void(0)" v-for="(item, index) in cates" :key="index">
            <i :class="item.icon + ' f14'" ></i>&nbsp; {{item.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </a>
    </div>
   </div>
   <!--视频导航结束-->
   <!--视频列表-->
   <div class="aps">
        <div class="dis30"></div>
        <v-videolist :params="params"></v-videolist>
        <div class="dis60"></div>
   </div>
   <!--视频列表结束-->
   <!--视频结束-->
   <v-footer :cates="cates"></v-footer>
</section>
</template>
<script>
import {cacheConfig} from "@cache"
import cache from "@cache";
export default {
    name:'home',
    data(){
        return{
            title: '',
            cates: [],
            datalist: [],
            params: {intui: 1}
        }
    },
    mounted: function () {
        this.getCfg()
        this.getCate()
    },
    methods: {
      getCfg () {
        this.$api.get("misc.config").then(res=>{
          if(res.status==1){
            cacheConfig.save(res.data)
            this.title = res.data.title || '橙子库' 
          }
        })
      },
      getCate () {
        this.$api.get("misc.get_cate").then(res=>{
          if(res.status==1){
            this.cates = res.data
          }
        })
      }
    }
}
</script>
<style lang="scss" scoped>
    .cates-nav {text-align:center;}


	.banner-box {}
	.banner-img {width:100%;height:488px;}
	.product-all{
        background-color: #fff;
    }
    .product-all .product{
        background-color: #fff;
        padding-top: 50px;
        text-align: center;
        height: 550px;
    }
    .product-all .product h1{
        font-size: 32px;
        margin-bottom: 10px;
    }
    .product-all .product .intro{
        color: #a8afb2;
        font-size: 14px;
        margin-bottom: 56px;
    }
    .product-all .product ul.block{
    }
    .product-all .product ul.block li{
        float: left;
        width: 518px;
        height: 166px;
        border-radius: 6px;
        margin-bottom: 10px;
        margin-right: 30px;
    }
    .product-all .product ul.block li>a{
        display: block;
        height: 166px;
        background-repeat: no-repeat;
        background-position: 20px 40px;
        background-image: url("../../../assets/web/picon1.png");
        background-size: 70px auto;
        padding-top: 22px;
        text-align: left;
        padding-left: 111px;
    }
    .product-all .product ul.block li>a .title1{
        font-size: 20px;
        color: #333;
    }
    .product-all .product ul.block li>a .title2{
        color: #666;
        line-height: 2;
        font-size: 12px;
    }
    .product-all .product ul.block li>a .s-intro{
        line-height: 1.5;
        color: #666;
        font-size: 14px;
        padding-right: 26px;
    }
    .product-all .product ul.block li>a:hover{
        box-shadow: 1px 1px 5px 2px #dedede;
        border-radius: 6px;
    }
    .product-all .product ul.block li>a:hover .option a{
        visibility: visible;
    }
    .product-all .product ul.block li .option{
        margin-top: 10px;
        height: 30px;
        padding-left: 214px;
        padding-right: 26px;
    }
    .product-all .product ul.block li .option a{
        text-indent: 20px;
        background-position: left center;
        background-repeat: no-repeat;
        background-size: 14px auto;
        visibility: hidden;
    }
    .product-all .product ul.block li .option a.purchase{
        float: left;
        background-image: url("../../../assets/web/purchase.png");
    }
    .product-all .product ul.block li .option a.view{
        float: right;
        background-image: url("../../../assets/web/view.png");
    }
    .parter-all{
        background-color: #f4f4f4;
    }
    .parter-all .parter{
        background-color: #f4f4f4;
        padding-top: 50px;
        text-align: center;
        padding-bottom: 126px;
    }
    .parter-all .parter h1{
        font-size: 32px;
        color: #333;
    }
    .parter-all .parter .intro{
        color: #999;
        margin-top: 26px;
        font-size: 16px;
    }
    .parter-all .parter ul.parter-icon{
        margin-top: 70px;
        position: relative;
        padding-left: 130px;
    }
    .parter-all .parter ul.parter-icon li{
        float: left;
        width: 200px;
        padding: 5px 20px;
        position: relative;
        border-radius: 4px;
    }
    .parter-all .parter ul.parter-icon li a{
        display: block;
        height: 66px;
        background-position: center top;
        background-repeat: no-repeat;
    }
    .parter-all .parter ul.parter-icon li:hover{
        box-shadow: 0 1px 20px rgba(87, 87, 87, 0.1);
        background-color: #fff;
    }
    .parter-all .parter ul.parter-icon li:hover a{
        background-position: center -66px;
    }
    .parter-all .parter ul.parter-icon li a.dianxin{
        background-image: url("../../../assets/web/dianxin.png");
    }
    .parter-all .parter ul.parter-icon li a.liantong{
        background-image: url("../../../assets/web/liantong.png");
    }
    .parter-all .parter ul.parter-icon li a.yidong{
        background-image: url("../../../assets/web/yidong.png");
    }
    .parter-all .parter ul.parter-icon li a.yundun{
        background-image: url("../../../assets/web/yundun.png");
    }
</style>

